<!DOCTYPE html>
<html>
<head>
    <title>MindGraph - Diagram Generation API</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            margin: 0; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container { 
            max-width: 1000px; 
            margin: 0 auto; 
            background: white; 
            padding: 40px; 
            border-radius: 15px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            margin-top: 20px;
            margin-bottom: 20px;
        }
        h1 { 
            color: #2c3e50; 
            text-align: center; 
            margin-bottom: 10px;
            font-size: 2.5em;
        }
        .subtitle {
            text-align: center;
            color: #7f8c8d;
            font-size: 1.2em;
            margin-bottom: 30px;
        }
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            border-radius: 10px;
            margin-bottom: 30px;
            text-align: center;
        }
        .hero-section h2 {
            margin-top: 0;
            font-size: 1.8em;
        }
        .hero-section p {
            font-size: 1.1em;
            line-height: 1.6;
        }
        .debug-button {
            text-align: center;
            margin: 20px 0;
        }
        .debug-button a {
            display: inline-block;
            padding: 12px 24px;
            background: #e74c3c;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: bold;
            transition: background 0.3s;
        }
        .debug-button a:hover {
            background: #c0392b;
        }
        .timing-section {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            border-left: 4px solid #27ae60;
        }
        .timing-section h3 {
            color: #2c3e50;
            margin-top: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .timing-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        .timing-card {
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            text-align: center;
        }
        .timing-value {
            font-size: 1.5em;
            font-weight: bold;
            color: #667eea;
        }
        .timing-label {
            color: #6c757d;
            font-size: 0.9em;
            margin-top: 5px;
        }
        .timing-link {
            display: inline-block;
            margin-top: 15px;
            padding: 8px 16px;
            background: #27ae60;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 0.9em;
            transition: background 0.3s;
        }
        .timing-link:hover {
            background: #229954;
        }
        .api-section { 
            margin: 30px 0; 
            padding: 25px; 
            background: #f8f9fa; 
            border-radius: 10px;
            border-left: 4px solid #667eea;
        }
        .api-section h2 { 
            color: #2c3e50; 
            margin-top: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .api-section h3 {
            color: #34495e;
            border-bottom: 2px solid #ecf0f1;
            padding-bottom: 5px;
        }
        code { 
            background: #e8e8e8; 
            padding: 3px 8px; 
            border-radius: 4px; 
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
        }
        pre { 
            background: #f4f4f4; 
            padding: 15px; 
            border-radius: 8px; 
            overflow-x: auto;
            border: 1px solid #ddd;
        }
        .endpoint { 
            margin: 20px 0; 
            padding: 15px;
            background: white;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }
        .method { 
            font-weight: bold; 
            color: #007acc; 
            font-size: 1.1em;
        }
        .url { 
            color: #333; 
            font-family: 'Courier New', monospace;
            font-size: 1.1em;
        }
        .description { 
            color: #666; 
            margin: 8px 0;
            line-height: 1.5;
        }
        .example { 
            margin: 15px 0; 
        }
        .response { 
            background: #e8f5e8; 
            border-left: 4px solid #4caf50; 
            padding: 15px; 
            margin: 15px 0;
            border-radius: 0 8px 8px 0;
        }
        .error { 
            background: #ffebee; 
            border-left: 4px solid #f44336; 
            padding: 15px; 
            margin: 15px 0;
            border-radius: 0 8px 8px 0;
        }
        .platforms-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        .platform-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            border: 2px solid #ecf0f1;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .platform-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .platform-card h3 {
            color: #2c3e50;
            margin-top: 0;
        }
        .features-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        .feature-item {
            background: white;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #3498db;
        }
        .chart-types {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin: 15px 0;
        }
        .chart-category {
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }
        .chart-category h4 {
            color: #2c3e50;
            margin-top: 0;
            border-bottom: 2px solid #ecf0f1;
            padding-bottom: 5px;
        }
        .chart-category ul {
            margin: 10px 0;
            padding-left: 20px;
        }
        .chart-category li {
            margin: 5px 0;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🧠 MindGraph</h1>
        <p class="subtitle">Intelligent Diagram Generation API for Workflow Platforms</p>
        
        <div class="hero-section">
            <h2>Transform Text into Visual Diagrams</h2>
            <p>MindGraph is designed as a powerful API and plugin solution for workflow platforms like Dify, Coze, and other automation tools. 
            Simply send a text prompt describing what you want to visualize, and get back interactive diagrams, charts, or PNG images 
            that can be seamlessly integrated into your workflows.</p>
        </div>

        <div class="debug-button">
            <a href="/debug">🔧 Debug Interface</a>
        </div>

        <div class="api-section">
            <h2>🚀 Core API Endpoints</h2>
            
            <div class="endpoint">
                <div class="method">POST</div>
                <div class="url">/generate_graph</div>
                <div class="description">Generate an interactive graph from natural language description. Returns JSON specification for rendering.</div>
                
                <div class="example">
                    <strong>Request:</strong>
                    <pre>{
  "prompt": "Compare cats and dogs",
  "language": "en"
}</pre>
                </div>
                
                <div class="response">
                    <strong>Response:</strong>
                    <pre>{
  "type": "double_bubble_map",
  "spec": {
    "left": "cats",
    "right": "dogs", 
    "similarities": ["mammals", "pets", "four legs"],
    "left_differences": ["independent", "clean", "quiet"],
    "right_differences": ["loyal", "active", "social"]
  }
}</pre>
                </div>
            </div>

            <div class="endpoint">
                <div class="method">POST</div>
                <div class="url">/generate_png</div>
                <div class="description">Generate a PNG image from natural language description. Perfect for embedding in documents or workflows.</div>
                
                <div class="example">
                    <strong>Request:</strong>
                    <pre>{
  "prompt": "Show monthly revenue trends",
  "language": "en"
}</pre>
                </div>
                
                <div class="response">
                    <strong>Response:</strong> Binary PNG image data
                </div>
            </div>

            <div class="endpoint">
                <div class="method">GET</div>
                <div class="url">/status</div>
                <div class="description">Health check endpoint for monitoring integration status.</div>
                
                <div class="response">
                    <strong>Response:</strong>
                    <pre>{
  "status": "running",
  "uptime_seconds": 45.2,
  "memory_percent": 12.3,
  "timestamp": 1640995200.0
}</pre>
                </div>
            </div>
        </div>

        <div class="api-section">
            <h2>🔌 Platform Integration</h2>
            <p>MindGraph is optimized for seamless integration with popular workflow and automation platforms:</p>
            
            <div class="platforms-grid">
                <div class="platform-card">
                    <h3>🤖 Dify</h3>
                    <p>Add visual diagram generation to your AI workflows and chatbots</p>
                </div>
                <div class="platform-card">
                    <h3>⚡ Coze</h3>
                    <p>Enhance your bot responses with dynamic visual content</p>
                </div>
                <div class="platform-card">
                    <h3>🔗 Zapier</h3>
                    <p>Automate diagram creation in your business processes</p>
                </div>
                <div class="platform-card">
                    <h3>🔄 Make</h3>
                    <p>Integrate visual generation into your automation scenarios</p>
                </div>
            </div>
        </div>

        <div class="api-section">
            <h2>✨ Key Features</h2>
            <div class="features-list">
                <div class="feature-item">
                    <h4>🎯 Natural Language Processing</h4>
                    <p>Understand complex prompts and automatically select the best visualization type</p>
                </div>
                <div class="feature-item">
                    <h4>🔄 Multiple Output Formats</h4>
                    <p>Get interactive JSON specs or ready-to-use PNG images</p>
                </div>
                <div class="feature-item">
                    <h4>🌍 Multi-language Support</h4>
                    <p>Generate diagrams from prompts in various languages</p>
                </div>
                <div class="feature-item">
                    <h4>⚡ Fast Response</h4>
                    <p>Optimized for real-time integration in workflow platforms</p>
                </div>
            </div>
        </div>

        <div class="api-section">
            <h2>📊 Supported Visualization Types</h2>
            
            <div class="chart-types">
                <div class="chart-category">
                    <h4>🧠 Thinking Maps® (Educational)</h4>
                    <ul>
                        <li><strong>Bubble Map</strong> - Central topic with attributes</li>
                        <li><strong>Circle Map</strong> - Topic with context boundary</li>
                        <li><strong>Double Bubble Map</strong> - Compare two topics</li>
                        <li><strong>Bridge Map</strong> - Analogical relationships</li>
                    </ul>
                </div>
                
                <div class="chart-category">
                    <h4>📈 Traditional Charts</h4>
                    <ul>
                        <li><strong>Bar Chart</strong> - Vertical/horizontal bars</li>
                        <li><strong>Line Chart</strong> - Connected data points</li>
                        <li><strong>Pie Chart</strong> - Circular segments</li>
                        <li><strong>Scatter Plot</strong> - X-Y coordinate points</li>
                    </ul>
                </div>
                
                <div class="chart-category">
                    <h4>🎨 Advanced Visualizations</h4>
                    <ul>
                        <li><strong>Area Chart</strong> - Filled areas under lines</li>
                        <li><strong>Heatmap</strong> - Color-coded grid data</li>
                        <li><strong>Tree Map</strong> - Nested rectangles</li>
                        <li><strong>Network Graph</strong> - Connected nodes</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="api-section">
            <h2>💡 Example Use Cases</h2>
            <ul>
                <li><strong>Educational Content:</strong> "Compare traditional and modern education methods"</li>
                <li><strong>Business Analysis:</strong> "Show quarterly sales performance trends"</li>
                <li><strong>Concept Mapping:</strong> "Create a mind map about artificial intelligence"</li>
                <li><strong>Process Flow:</strong> "Diagram the customer onboarding process"</li>
                <li><strong>Data Comparison:</strong> "Compare features of different software platforms"</li>
            </ul>
        </div>

        <div class="timing-section">
            <h3>⚡ Performance Statistics</h3>
            <p>Real-time performance metrics for LLM processing and rendering</p>
            <div class="timing-stats" id="timing-stats">
                <div class="timing-card">
                    <div class="timing-value">--</div>
                    <div class="timing-label">LLM Calls</div>
                </div>
                <div class="timing-card">
                    <div class="timing-value">--</div>
                    <div class="timing-label">Avg LLM Time</div>
                </div>
                <div class="timing-card">
                    <div class="timing-value">--</div>
                    <div class="timing-label">Renders</div>
                </div>
                <div class="timing-card">
                    <div class="timing-value">--</div>
                    <div class="timing-label">Avg Render Time</div>
                </div>
            </div>
            <a href="/timing-stats" class="timing-link">📊 View Detailed Performance Dashboard</a>
        </div>

        <div class="api-section">
            <h2>⚠️ Error Handling</h2>
            <div class="error">
                <strong>400 Bad Request:</strong>
                <pre>{
  "error": "Invalid request format",
  "details": "Missing required 'prompt' field"
}</pre>
            </div>
            
            <div class="error">
                <strong>500 Internal Server Error:</strong>
                <pre>{
  "error": "An unexpected error occurred. Please try again later.",
  "request_id": "abc123"
}</pre>
            </div>
        </div>
    </div>

    <script>
        // Load timing statistics
        function loadTimingStats() {
            fetch('/api/timing_stats')
                .then(response => response.json())
                .then(data => {
                    const statsContainer = document.getElementById('timing-stats');
                    const cards = statsContainer.querySelectorAll('.timing-card');
                    
                    cards[0].querySelector('.timing-value').textContent = data.llm.total_calls;
                    cards[1].querySelector('.timing-value').textContent = data.llm.average_time_seconds + 's';
                    cards[2].querySelector('.timing-value').textContent = data.rendering.total_renders;
                    cards[3].querySelector('.timing-value').textContent = data.rendering.average_render_time_seconds + 's';
                })
                .catch(error => {
                    console.error('Error loading timing stats:', error);
                });
        }

        // Load stats on page load
        loadTimingStats();
        
        // Refresh stats every 30 seconds
        setInterval(loadTimingStats, 30000);
    </script>
</body>
</html> 